<template>
  <span class="select-wrap">
      <el-cascader
        v-if="getLabelLength > 5000"
        popper-class="label-cascader"
        :options="callLabel.searchFirstLabel"
        v-model="selectedOptions"
        @change="handleChange"
        size="mini"
        :props="labelProps"
        separator=">"
        filterable
      >
      </el-cascader>
      <el-cascader
        v-else
        popper-class="label-cascader"
        :options="callLabel.searchFirstLabel"
        v-model="selectedOptions"
        @change="handleChange"
        size="mini"
        :props="{checkStrictly: true}"
        separator=">"
        filterable
      >
      </el-cascader>
  </span>
</template>
<script>
  import {getAllUseMultiCallLabel, getAllUseSingleCallLabel} from '@/utils/m7Utils.js'
  export default {
    name: 'labelSelect',
    props: {
      filterable: Boolean,
      stringFlag: Boolean, // 通话高级搜索带上name值
      resetSelect: Boolean,
      isClear: Boolean,
      isNoLabel: {type: Boolean, default: false}, // 第一级是否展示"无标签" eg: 通话高级搜索
      needType: {type: Boolean, default: false} // 选择标签时，是否需要把当前标签的type emit 出去
    },
    data () {
      return {
        selectedOptions: [], // 标签树形选中的值
        callLabel: {}, // 标签树形的数据
        labelProps: {
          lazy: true,
          checkStrictly: true,
          lazyLoad (node, resolve) {
            setTimeout(() => {
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve()
            }, 50);
          }
        }
      }
    },
    watch: {
      resetSelect: 'resetSelectes',
      isClear: 'isCleares'
    },
    computed: {
      getLabelLength () {
        return  Object.keys(this.$store.state.allKeyLabels || {}).length
      }
    },
    methods: {
      handleChange (arr) { // change树形
        let idArr = []
        let isAll = false
        let labelType = 'multi'
        arr.forEach(item => {
          if (this.stringFlag) { // 通话高级搜索带上name值
            idArr.push(item._id + '__' + item.name)
            if (!item._id) { // 选择了全部
              isAll = true
            }
          } else {
            idArr.push(item._id)
          }
          labelType = item.type || 'multi'
        })
        if (this.needType) { // 质检和智能质检需要标签类型
          this.$emit('labelSelect', {arr: isAll ? [] : idArr, type: labelType}, 'multiCallLabel')
        } else {
          this.$emit('labelSelect', isAll ? [] : idArr, 'multiCallLabel')
        }
      },
      resetSelectes (cur, prev) {
        if (this.resetSelect) {
          this.selectedOptions = []
          this.$emit('labelSelect', [], 'multiCallLabel')
        }
      },
      isCleares () {
        if (this.isClear) { // 高级搜索的清空操作
          this.selectedOptions = []
          this.$emit('labelSelect', [], 'multiCallLabel')
        }
      }
    },
    beforeMount () {
      let allLabel = this.$getCache('callLabel')
      if (allLabel === -1) {
        allLabel = []
      }
      let search = true
      let singleObj = getAllUseSingleCallLabel(allLabel, search)
      let multiObj = getAllUseMultiCallLabel(allLabel, singleObj.searchSingleLabel, search)
      this.callLabel = multiObj
      const nullObj = { value: {'_id': 'noLabel', 'name': '无标签'}, label: '无标签' }
      const allObj = { value: {'_id': '', 'name': '全部'}, label: '全部' }
      if (!allLabel) {   //   解决刷新页面   数据取不到
        this.$store.dispatch('getCache', {type: 'callLabel'}).then((res) => {
          allLabel = res || []
          singleObj = getAllUseSingleCallLabel(allLabel, search)
          multiObj = getAllUseMultiCallLabel(allLabel, singleObj.searchSingleLabel, search)
          this.callLabel = multiObj
          if (this.callLabel.searchFirstLabel && this.isNoLabel) {
            this.callLabel.searchFirstLabel.unshift(nullObj)
          }
          this.callLabel.searchFirstLabel.unshift(allObj)
        })
      } else {
        if (this.callLabel.searchFirstLabel && this.isNoLabel) {
          this.callLabel.searchFirstLabel.unshift(nullObj)
        }
        this.callLabel.searchFirstLabel.unshift(allObj)
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .adv-search-width
    width 192px
    margin-right 14px
  .seletct-padding
   padding 0 10px
  .select-wrap
    .el-select
      width 30%
  .label-select-option
    max-width 500px
    height auto
    word-wrap break-word
    white-space normal
</style>
